import React, { useState } from 'react';

/**
 * 登录组件属性接口
 * @interface LoginProps
 * @property {function(string): void} onLogin - 登录成功回调函数
 */
export interface LoginProps {
  onLogin: (username: string) => void;
}

const Login: React.FC<LoginProps> = ({ onLogin }) => {
  const [username, setUsername] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (username.trim()) {
      setLoading(true);
      // 模拟登录过程
      setTimeout(() => {
        onLogin(username.trim());
        setLoading(false);
      }, 500);
    }
  };

  return (
    <div className="login-container">
      <form className="login-form" onSubmit={handleSubmit}>
        <h2>欢迎使用实时聊天</h2>
        <div className="form-group">
          <label htmlFor="username">用户名</label>
          <input
            type="text"
            id="username"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            placeholder="请输入您的用户名"
            required
            autoFocus
          />
        </div>
        <button type="submit" className="btn" disabled={loading || !username.trim()}>
          {loading ? '登录中...' : '开始聊天'}
        </button>
        <p style={{ marginTop: '20px', textAlign: 'center', color: '#666', fontSize: '14px' }}>
          输入任意用户名即可登录，无需密码
        </p>
      </form>
    </div>
  );
};

export default Login;